<template>
  <!-- 新增编辑指令 -->
  <h-modal class="event-modal" v-model.lazy="show" :title="`${type == 'edit' ? '编辑指令': '添加指令' }`" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="12">
          <a-form-model-item label="指令标题" prop="title">
            <a-input v-model.lazy="form.title" :maxLength="50" placeholder="指令标题"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="指令周期(分钟)" prop="sendCycle">
            <a-input-number style="width: 100%" v-model.lazy="form.sendCycle" placeholder="指令周期"></a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="第三方公司" prop="thirdId">
            <a-select mode="multiple" v-model="thirdId" placeholder="请选择" @change="setthirdId">
              <a-select-option :key="item.id" :value="item.id" v-for="item in componey">{{ item.companyName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="type == 'add'">
          <a-form-model-item label="是否立即执行" prop="status">
            <a-select v-model="form.status" placeholder="请选择">
              <a-select-option value="0">否</a-select-option>
              <a-select-option value="1">是</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="指令计划内容" prop="orderContent">
            <a-textarea v-model.lazy="form.orderContent" placeholder="请输入指令计划内容" :rows="3"></a-textarea>
          </a-form-model-item>
        </a-col>

      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { deptList } from '@/api/dept';
import { addOrderPlan, updateOrderPlanCycle, getThirdName, getOrderPlan } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';

const defaultForm = {

};

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  components: {

  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    },
    dept(val) {
      this.form.departIdList = val.join(',');
    }
  },
  data() {
    return {
      moment,
      type: 'add',
      thirdId: [],
      show: false,
      deptArr: [],
      dept: [],
      componey: [],
      form: cloneDeep(defaultForm),
      rules: {
        orderContent: [{ required: true, message: '请输入' }],
        title: [{ required: true, message: '请输入' }],
        sendCycle: [{ required: true, message: '请输入' }],
        status: [{ required: true, message: '请选择' }]
      }
    };
  },
  created() {
    deptList({
      pageNo: 1,
      pageSize: 1000
    }).then(res => {
      this.deptArr = res.data.records.map(e => {
        return {
          label: e.depart,
          value: e.id
        };
      });
    });
  },
  methods: {
    setthirdId(e) {
      this.$set(this.form, 'thirdId', e.join(','));
    },
    edit(form) {
      this.type = 'edit';

      this.getThirdName();
      getOrderPlan({ id: form.id }).then(res => {
        this.form = { ...res.data, id: form.id };
      });
    },
    add(id) {
      this.type = 'add';
      this.form = cloneDeep(defaultForm);
      this.form.eventId = id;
      this.getThirdName();
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            addOrderPlan({ ...this.form }).then(res => {
            this.$message.success('创建成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
          });
          } else if (this.type == 'edit') {
            // const { id, sendCycle } = this.form;
            updateOrderPlanCycle(this.form).then(res => {
            this.$message.success('修改成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep(defaultForm);
          });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getImg(img) {
      console.log(img, 'imgggg');
      // const file = img.map(e => e.imgUrl).join(',');
      this.form.file = img;
    },
    getThirdName() {
      getThirdName().then(res => {
        this.componey = res.data;
      });
    }
  }
};
</script>

<style>

</style>
